<template>
  <main class="p-1">
    <KCard style="padding: 2px">
      <OrderCard />
    </KCard>

    <KCard class="dashed bg-w" style="margin-top: 4px">
      <div class="actions-container">
        <div class="item" @click="showPayModal = true">
          <img src="../../assets/images/充值.png" alt="cz" />
          充值
        </div>
        <div class="item" @click="showChrageModal = true">
          <img src="../../assets/images/代理互转1.png" alt="cz" />
          代理互转
        </div>
        <div @click="useGoto('collection-info')" class="item">
          <img src="../../assets/images/收款管理.png" alt="cz" />
          收款管理
        </div>
        <div @click="useGoto('user-msg')" class="item">
          <img src="../../assets/images/教程.png" alt="cz" />
          教程
        </div>
      </div>
    </KCard>

    <div class="order-list-container mb-12 h-full">
      <div class="order-list-header">
        <div @click="changeActive(0)" :class="active == 0 ? 'active' : ''">核查中</div>
        <div @click="changeActive(1)" :class="active == 1 ? 'active' : ''">核查超时</div>
        <div @click="changeActive(2)" :class="active == 2 ? 'active' : ''">异常订单</div>
        <div @click="changeActive(5)" :class="active == 5 ? 'active' : ''">手动取消</div>

        <div @click="useGoto('collection-index')">订单记录 ></div>
      </div>

      <van-search
        style="border-radius: 4px; margin-top: 2px; padding: 0 0 0px 0"
        v-model="searchValue"
        @search="searchOrder"
        placeholder="请输入订单号"
        show-action
      >
        <template #action>
          <div @click="searchOrder">搜索</div>
        </template>
      </van-search>

      <div class="order-list-content overflow-auto">
        <OrderList ref="orderList" :order-status="active" />
      </div>
    </div>
    <payModal :show="showPayModal" @close="showPayModal = false" />
    <chargeModal :show="showChrageModal" @close="showChrageModal = false" />
  </main>
</template>

<script setup lang="ts">
import KCard from '@/components/KCard.vue'
import OrderCard from './components/OrderCard.vue'
import OrderList from './components/OrderList.vue'
import { onMounted, ref, watch } from 'vue'
import { useGoto } from '@/router'
import payModal from './modal/payModal.vue'
import chargeModal from './modal/chrageModal.vue'
import { GetReminderInfo } from '@/utils/system'
import { getOrderStatus } from '@/utils/order'
import { setCache } from '@/utils/cache'

const active = ref(0)
const showPayModal = ref(false)
const showChrageModal = ref(false)
const searchValue = ref('')

const orderList = ref()

function changeActive(index: number) {
  active.value = index
}

watch(searchValue, (val) => {
  if (val == '') {
    orderList.value.startRefreshList()
  }
})

onMounted(async () => {
  const arr = [0, 1, 2, 5]
  arr.forEach(async (item) => {
    const data = await GetReminderInfo('app_order_item_bottom_' + getOrderStatus(item))
    setCache('app_order_item_bottom_' + getOrderStatus(item), data, true)
  })
})

function searchOrder() {
  orderList.value.searchOrderExport(searchValue.value)
}
</script>

<style scoped lang="less">
.actions-container {
  display: flex;
  justify-content: space-around;
  align-content: center;
  color: #fff;
  font-weight: 600;
  font-size: 18px;
  text-align: center;

  .item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;

    img {
      width: 50px;
      height: 50px;
    }
  }
}

.order-list-container {
  margin-top: 8px;
  padding: 0 6px;

  .order-list-header {
    border-left: 3px solid rgb(255, 248, 29);
    padding-left: 6px;
    display: flex;
    color: #fff;
    justify-content: space-between;
    text-align: center;

    > .active {
      color: rgb(255, 248, 29);
      border-bottom: 2px solid rgb(255, 248, 29);
    }
  }
}
</style>
